<template>
  <body class="gray-bg">
    <div class="cards-contant">
      <div class="card-contant col-sm-3" 
     
      :style="cardlocation.serverstyle"
      v-bind:key=i 
      v-for="(cardlocation,i) in cardslocations">
        <div class="col-sm-12 card-info">
        <div class="col-sm-12 card-header">标题写在这里</div>
        <div class="col-sm_12">下面是卡片的内容部分
          :style="location.serverstyle"
        </div>
        </div>
        
      </div>


    <div class="card-contant col-sm-3" 
     
      style="left :0px ;top:0px"
    >
        <div class="col-sm-12 card-info">
        <div class="col-sm-12 card-header">标题写在这里</div>
        <div class="col-sm_12">下面是卡片的内容部分
          :style="location.serverstyle"
        </div>
        </div>
        
      </div>
    </div>
  </body>
</template>
<style>
@import "../css/bootstrap.min.css";
@import "../css/style.min.css";
@import "../css/cards.css";
</style>
<script>
export default {
  name: "cards",
  data() {
    return {
      cardslocations:[
          {
            serverstyle:"left : 0px ; top : 0px "
            
          },
          {
           serverstyle:"left : 25vw ; top : 150px "
          },
          {
           serverstyle:"left : 50vw ; top : 4500px "
          },
          {
           serverstyle:"left : 75vw ; top : 300px "
          }
      ],
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>
